<template>
  <div class="login-container">
    <!-- logo区域 -->
    <div class="logo">
      <img alt="" src="../assets/logo.png">
    </div>



    <!--表单区域-->
    <el-form :model="user" class="loginform_style" :rules="userRules" ref="userForm" label-width="0px" >
      <el-form-item prop="username">
        <el-input v-model="user.username"  placeholder="输入您的用户名" prefix-icon="el-icon-user-solid"></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input type="password" placeholder="输入您的密码" prefix-icon="el-icon-lock" v-model="user.pwd"></el-input>
      </el-form-item>
      <el-form-item class="btns">
        <el-button @click="login" type="primary">登录</el-button>
        <el-button @click="resetForm" type="info">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
    export default {
        name: "Login",
      data(){
          return{
            user:{
              username:"",
              pwd:"",
            },
            userRules: {
              username: [
                {require:true,message:"请输入用户名", trigger: 'blur' }
              ],
              pwd: [
                {require:true,message:"请输入密码", trigger: 'blur' },
                {min:6,message: "密码必须六位数以上",trigger: 'blur' }
              ],
            }
          }
      },
      methods:{
          login:function () {
            this.$http.post("/user/login",this.user).then((res)=>{
              var users=res.data.user;
              if(null!=users){
                sessionStorage.setItem("user",JSON.stringify(users));
                sessionStorage.setItem("role",res.data.role);
                alert("登陆成功");
                this.$router.push("/list")
              }else{
                alert("登录失败")
              }
            })
          },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
</script>

<style scoped lang="less">
  .login-container {
    width: 450px;
    height: 314px;
    background-color: #fff;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;

    .logo {
      width: 130px;
      height: 130px;
      border: 1px solid #eee;
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 0 10px #eee;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-60px);
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .loginform_style {
      padding: 0 20px;
      margin-top: 110px;
    }

    .btns {
      display: flex;
      justify-content: center;
    }
  }
</style>
